<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition>
	<p:panel header="${msgs.pleaseRegister}" style="width:100%;">
		<f:event listener="#{userController.preRegister}"
			type="preRenderComponent"></f:event>
		<f:event listener="#{locationController.init}"
			type="preRenderComponent"></f:event>
		<h:outputLabel style="color:green;font-size:1.5em;font-weight:bold;">#{msgs.pleaseFillInTrueInfo}</h:outputLabel>
		<p:separator style="color:green" />
		<h:panelGrid id="registerPanel" columns="2" style="width:100%;">
			<h:outputText value="#{msgs.preferedLanguage}*" />
			<p:selectOneRadio value="#{userModel.current.language}">
				<f:selectItems value="#{userModel.availableLanguages}"
					var="language" itemValue="#{language}"
					itemLabel="#{language.label}"></f:selectItems>
				<p:ajax event="change" listener="#{userController.languageChanged}"
					update="registerPanel"></p:ajax>
			</p:selectOneRadio>
			<h:outputText value="#{msgs.loginInformation}"
				style="text-align:center;width:100%;border:0px;color:blue" />
			<p:separator />
			<h:outputText value="#{msgs.email}*" />
			<h:panelGrid columns="2">
				<p:inputText id="email" value="#{userModel.current.email}"
					validator="#{validator.validateEmail}" required="true"
					requiredMessage="#{msgs.requiredFieldMessage}">
					<f:attribute name="user" value="#{userModel.current}" />
				</p:inputText>
				<p:message for="email" showSummary="false"></p:message>
			</h:panelGrid>
			<h:outputText value="#{msgs.telephone}*" />
			<h:panelGrid columns="2">
				<p:inputMask id="telephone" value="#{userModel.current.telephone}"
					mask="(999)999-9999" validator="#{validator.validateTelephone}"
					required="true" requiredMessage="#{msgs.requiredFieldMessage}">
					<f:attribute name="user" value="#{userModel.current}" />
				</p:inputMask>
				<p:message for="telephone" showSummary="false"></p:message>
			</h:panelGrid>
			<h:outputLabel value="#{msgs.password}*" />
			<h:panelGrid columns="2">
				<p:password id="password"
					validatorMessage="#{msgs.twoPasswordNotMatch}"
					value="#{userModel.current.password}" required="true"
					requiredMessage="#{msgs.requiredFieldMessage}" feedback="true"
					match="confirmPassword" label="password" />
				<p:message for="password" showSummary="false" showDetail="true" />
			</h:panelGrid>
			<h:outputLabel value="#{msgs.confirmPassword}*" />
			<h:panelGrid columns="2">
				<p:password id="confirmPassword"
					value="#{userModel.current.confirmPassword}" feedback="true"
					required="true" requiredMessage="#{msgs.requiredFieldMessage}"
					validator="#{validator.validateNotEmpty}" label="Confirm password" />
				<p:message for="confirmPassword" showSummary="false"
					showDetail="true"></p:message>
			</h:panelGrid>
			<h:outputText value="#{msgs.deliveryPickupInformation}"
				style="text-align:center;width:100%;border:0px;color:blue" />
			<p:separator />
			<h:outputText value="#{msgs.pickUpLocation}*:" />

			<h:panelGrid id="pickupLocationPanelGrid" columns="2">
				<ui:remove>
					<h:panelGroup>
						<p:inputText id="inputedLocation" disabled="true" size="200"
							value="#{userModel.current.dropOffLocation.name} #{userModel.current.dropOffLocation.address} #{userModel.current.dropOffLocation.postCode}"
							validator="#{validator.validateDropOffLocation}" />
						<p:message for="inputedLocation" showSummary="false" />

						<h:outputText value="  "></h:outputText>
						<p:inputText value="#{userModel.current.dropOffLocation.address}"
							required="true" requiredMessage="#{msgs.requiredFieldMessage}" />
						<h:outputText value="  "></h:outputText>
						<p:inputText value="#{userModel.current.dropOffLocation.postCode}"
							required="true" requiredMessage="#{msgs.requiredFieldMessage}" />

					</h:panelGroup>
				</ui:remove>
				<ui:remove>
					<p:selectOneMenu value="#{locationModel.currentDistrict}">
						<f:selectItem itemLabel="#{msgs.pleaseChooseDistrict}"></f:selectItem>
						<f:selectItems value="#{locationModel.distinctDistricts}"></f:selectItems>
						<p:ajax update="locationSelectMenu"></p:ajax>
					</p:selectOneMenu>
				</ui:remove>
				<h:panelGrid columns="2"  style="width:100%">
					<p:commandButton value="#{msgs.clickToChoosePickupLocation}"
						oncomplete="registerChooseLocationMapDlg.show()" ajax="true"></p:commandButton>
					<p:selectOneMenu id="locationSelectMenu"
						value="#{userModel.current.dropOffLocation}" required="true"
						requiredMessage="#{msgs.requiredFieldMessage}"
						converter="#{locationConverter}"
						validator="#{validator.validateDropOffLocation}">
						<f:selectItem itemLabel=""></f:selectItem>
						<f:selectItems value="#{locationModel.list}" var="location"
							itemLabel="#{location.address} (#{location.postCode})"
							itemValue="#{location}" />
					</p:selectOneMenu>
					<p:message for="locationSelectMenu" showSummary="false" />
				</h:panelGrid>
			</h:panelGrid>


			<h:outputText value="#{msgs.userTitle}" />
			<p:selectOneMenu value="#{userModel.current.title}">
				<f:selectItems value="#{userModel.availableTitles}" var="titles"
					itemValue="#{title}" itemLabel="#{titles.label}"></f:selectItems>
			</p:selectOneMenu>
			<h:outputText value="#{msgs.lastName}*" />
			<h:panelGrid columns="2">
				<p:inputText id="lastName" value="#{userModel.current.lastName}"
					required="true" requiredMessage="#{msgs.requiredFieldMessage}" />
				<p:message for="lastName" showSummary="false"></p:message>
			</h:panelGrid>
			<h:outputText value="#{msgs.firstName}*" />
			<h:panelGrid columns="2">
				<p:inputText id="firstName" value="#{userModel.current.firstName}"
					required="true" requiredMessage="#{msgs.requiredFieldMessage}" />
				<p:message for="firstName" showSummary="false" />
			</h:panelGrid>

			<h:outputText value="#{msgs.address}*" />
			<h:panelGrid id="pickupLocationPanel" columns="2" style="width:100%">
				<p:inputText id="address" value="#{userModel.current.address}"
					required="true" requiredMessage="#{msgs.requiredFieldMessage}"
					style="width:100%" />
				<p:message for="address" showSummary="false" style="width:100%"></p:message>
			</h:panelGrid>
			<h:outputText value="#{msgs.otherInformation}"
				style="text-align:center;width:100%;border:0px;color:blue" />
			<p:separator />
			<h:outputText value="#{msgs.passwordQuestion}*" />
			<h:panelGrid columns="2">
				<p:selectOneMenu id="passwordQuestion"
					value="#{userModel.current.passwordQuestion}" required="true"
					requiredMessage="#{msgs.requiredFieldMessage}" editable="true">
					<f:selectItem itemLabel="#{msgs.pleaseChoosePasswordQuestion}"
						itemValue=""></f:selectItem>
					<f:selectItems value="#{userModel.current.passwordQuestionList}"
						var="questionList" itemLabel="#{questionList}"
						itemValue="#{questionList}" />
				</p:selectOneMenu>
				<p:message for="passwordQuestion" showSummary="false"></p:message>
			</h:panelGrid>
			<h:outputText value="#{msgs.passwordAnswer}*" />
			<h:panelGrid columns="2">
				<p:inputText id="passwordAnswer"
					value="#{userModel.current.passwordAnswer}" required="true"
					requiredMessage="#{msgs.requiredFieldMessage}" />
				<p:message for="passwordAnswer" showSummary="false" />
			</h:panelGrid>
			<h:outputText value="#{msgs.mobilePhone}" />
			<p:inputMask value="#{userModel.current.mobilePhone}"
				mask="(999)999-9999" />
			<h:inputHidden />
			<p:commandButton value="#{msgs.submit}" ajax="true"
				update=":centerForm" actionListener="#{userController.register}"></p:commandButton>
		</h:panelGrid>
	</p:panel>
</ui:composition>

</html>